<template>
  <div class="edit-info">
    <el-card>
      <el-tabs type="card" v-model="activeTab">
        <el-tab-pane label="个人资料" name="first" class="tab-content">
          <PersonalInfo />
        </el-tab-pane>
        <el-tab-pane label="专栏信息" name="second" class="tab-content">
          <ColumnInfo />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { ElTabs, ElTabPane, ElCard } from 'element-plus'
import PersonalInfo from './components/personalInfo.vue'
import ColumnInfo from './components/columnInfo.vue'

export default defineComponent({
  name: 'editInfo',
  components: {
    ElTabs,
    ElTabPane,
    ElCard,
    PersonalInfo,
    ColumnInfo,
  },
  setup() {
    let activeTab = ref('first')
    return {
      activeTab,
    }
  },
})
</script>

<style lang="scss" scoped>
.edit-info {
  width: 960px;
  margin: 0 auto;
  padding: 40px 0;
  height: calc(100vh - 116px);
  .tab-content {
    padding: 40px 40px 40px 40px;
  }
}
</style>
